<template>
	<section>
		<el-form ref="addProdForm" :rules="rules" :model="prodInfo" label-width="80px">
			<el-form-item label="商品分类" prop="prodCategory">
				<el-select
						v-model="prodInfo.prodCategory"
						placeholder="请选择商品分类">
					<el-option :label="item.name"
							   @click.native="selectedSubClass = item.subClass"
							   :value="item.categoryName"
							   v-for="(item, key) in Category"
							   :key="key">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品子类" prop="prodSubClass">
				<el-select
						v-model="prodInfo.prodSubClass"
						placeholder="请选择当前分类子类">
					<el-option
							:key="key"
							:label="item.subName"
							:value="item.subCategoryName"
							v-for="(item, key) in selectedSubClass">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="即时上架" prop="isPublish">
				<el-switch v-model="prodInfo.isPublish"></el-switch>
			</el-form-item>
			<el-form-item label="商品名称" prop="prodSupTitle">
				<el-input
						v-model="prodInfo.prodSupTitle"
						placeholder="商品主要描述"></el-input>
			</el-form-item>
			<el-form-item label="商品介绍" prop="prodSubTitle">
				<el-input
						v-model="prodInfo.prodSubTitle"
						placeholder="商品详细介绍"></el-input>
			</el-form-item>
			<el-form-item label="商品原价" prop="originPrice">
				<el-input
						v-model="prodInfo.originPrice"
						placeholder="原价"
						type="number"></el-input>
			</el-form-item>
			<el-form-item label="商品现价" prop="currentPrice">
				<el-input
						v-model="prodInfo.currentPrice"
						placeholder="现价"
						type="number"></el-input>
			</el-form-item>
			<el-form-item label="商品图片">
				<el-upload class="" action="https://upload.qiniup.com"
						   ref="qiniuImgUpload"
						   multiple
						   :on-success="uploadSuccess"
						   :data="qiniuData"
						   :auto-upload="false"
						   list-type="picture">
					<el-button size="small" type="primary">上传商品图片</el-button>
					<div slot="tip" class="el-upload__tip">请上传小于500kb的jpg/png文件,至少4张图片</div>
				</el-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即添加</el-button>
				<el-button type="warning" @click="resetAddProd">取消添加</el-button>
			</el-form-item>
		</el-form>
	</section>
</template>
<script>
    export default {
        data() {
            return {
                Category: [
					{
					    name: '美妆护肤',
                        categoryName: 'beauty',
						subClass: [
							{
                                subName: '彩妆',
                                subCategoryName: 'cosmetics',
							},
                            {
                                subName: '面膜',
                                subCategoryName: 'mask',
                            },
                            {
                                subName: '香水',
                                subCategoryName: 'perfume',
                            },
                            {
                                subName: '洁面',
                                subCategoryName: 'clean',
                            }
						]
					},
                    {
                        name: '超值百货',
                        categoryName: 'department',
                        subClass: [
                            {
                                subName: '9.9包邮',
                                subCategoryName: 'freePost',
                            },
                            {
                                subName: '保温水杯',
                                subCategoryName: 'waterCup',
                            },
                            {
                                subName: '洗护纸品',
                                subCategoryName: 'cleanAndPaper',
                            },
                            {
                                subName: '身体护理',
                                subCategoryName: 'careBody',
                            }
                        ]
                    },
                    {
                        name: '名品腕表',
                        categoryName: 'watches',
                        subClass: [
                            {
                                subName: '人气手表',
                                subCategoryName: 'popWatches',
                            },
                            {
                                subName: 'DW',
                                subCategoryName: 'dw',
                            },
                            {
                                subName: '阿玛尼',
                                subCategoryName: 'armani',
                            },
                            {
                                subName: 'CK',
                                subCategoryName: 'ck',
                            }
                        ]
                    },
                    {
                        name: '品质家电',
                        categoryName: 'electrical',
                        subClass: [
                            {
                                subName: '飞科专区',
                                subCategoryName: 'flyco',
                            },
                            {
                                subName: '苏泊尔',
                                subCategoryName: 'supor',
                            },
                            {
                                subName: '美的',
                                subCategoryName: 'midea',
                            },
                            {
                                subName: '松下',
                                subCategoryName: 'panasonic',
                            }
                        ]
                    },
                    {
                        name: '手机专区',
                        categoryName: 'phone',
                        subClass: [
                            {
                                subName: '小米',
                                subCategoryName: 'mi',
                            },
                            {
                                subName: '华为',
                                subCategoryName: 'huawei',
                            },
                            {
                                subName: 'VIVO',
                                subCategoryName: 'vivo',
                            },
                            {
                                subName: 'OPPO',
                                subCategoryName: 'oppo',
                            },
                            {
                                subName: '苹果',
                                subCategoryName: 'iphone',
                            }
                        ]
                    },
                    {
                        name: '精选配件',
                        categoryName: 'parts',
                        subClass: [
                            {
                                subName: '智能手表',
                                subCategoryName: 'smartWatch',
                            },
                            {
                                subName: 'iPhone配件',
                                subCategoryName: 'iphoneParts',
                            },
                            {
                                subName: '其他配件',
                                subCategoryName: 'otherParts',
                            }
                        ]
                    },
				],
				selectedSubClass: [],
				uploadFileList: [],
                prodInfo: {
                    prodCategory: '', //商品主分类
                    prodSubClass: '', //商品子分类
                    prodImage: [], //商品图片
                    prodSupTitle: '', //商品主标题
                    prodSubTitle: '', //商品主标题
                    originPrice: '', //商品原价格
                    currentPrice: '', //商品现价格
					isPublish: false //商品默认上架
                },
				rules:{
                    prodCategory: [{ required: true, message: '必须选择一个商品分类', trigger: 'change'}],
                    prodSubClass: [{ required: true, message: '必须选择一个商品子类', trigger: 'change'}],
                    prodSupTitle: [{ required: true, message: '商品主标题不得为空', trigger: 'blur'}],
                    prodSubTitle: [{ required: true, message: '商品副标题不得为空', trigger: 'blur'}],
                    originPrice: [{ required: true, message: '商品原始价格不得为空', trigger: 'blur'}],
                    currentPrice: [{ required: true, message: '商品券后价格不得为空', trigger: 'blur'}]
				},
                qiniuData:{ token: ''}
            }
        },
        methods: {
            // 获取七牛对象存储token
            getQiniuToken() {
                this.$http.getQiniuToken()
					.then(res=>{
					    this.qiniuData.token = res.data.data;
                    }).catch(()=>{
                        // 请求失败时 弹出确认框让用户重试
						this.$confirm('没有取得图片上传凭证,请重试!', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
							.then(()=>{
							    this.getQiniuToken();
							})
							.catch()
                	});
			},
			// 触发el-upload的图片上传操作
			imgUpload() {
              this.$refs.qiniuImgUpload.submit();
			},
			// el-upload图片上传成功后回调
            uploadSuccess(res, file, fileList) {
                // 将上传成功后返回的图片链接存到uploadFileList中
                this.uploadFileList = fileList.map(value => `http://pkzr1rkd3.bkt.clouddn.com/${value.response.hash}`);
                // 将所有信息存放到远程服务器
				if (!!this.uploadFileList.length) {
				    this.prodInfo.prodImage = this.uploadFileList;
                    this.$http.addProd(this.prodInfo)
                        .then(res=>{
                            if (res.data.code = 10001) {
                                this.$message({
                                    message: '恭喜你,添加商品成功!',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: '上传失败',
                                    type: 'error'
                                });
							}
                            this.resetAddProd();
                            this.clearUploadFile();
                        })
                        .catch(err=>{
                            this.$message({
                                message: '远程服务器未知错误',
                                type: 'error'
                            });
                            this.resetAddProd();
                            this.clearUploadFile();
						});
				} else {
                    this.$message({
                        message: '图片上传似乎出了点小故障',
                        type: 'danger'
                    });
				}
            },
            onSubmit() {
                this.$refs.addProdForm.validate(validRes => {
                    if(validRes) {
                        this.imgUpload(); // 触发图片上传
					}else{
                        this.$notify.error({
                            title: '上传错误',
                            message: '请将表单填写完整!'
                        });
                        return false;
					}
				});

			},
			resetAddProd() {
                // 重置表单域
                this.$refs.addProdForm.resetFields();
			},
			clearUploadFile() {
                this.$refs.qiniuImgUpload.clearFiles();
			}
        },
		created() {
            this.getQiniuToken();
		}
    }
</script>
<style scoped>

</style>
